<template>
  <div class="resetPasswrodBox">
    <loginHeader></loginHeader>
    <div class="panel-header">
      <h2>企业密码修改</h2>
      <p>RESET PASSWORD</p>
      <div class="header-line"></div>
    </div>
    <div class="resetBox">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :label-position="labelPosition">
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
            </el-form-item>
            <!-- <el-button type="primary" @click="submitForm('ruleForm')" class="restBtn">更改密码</el-button> -->
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm'),dialogVisible = true" class="restBtn">更改密码</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
        </el-form>
    </div>

    <!-- dialog -->
    <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <!-- content -->
      <div class="dialogContent">
        <div class="content-left"><img src="../../static/image/forget-human.png" alt=""></div>
        <div class="content-right">
          <p>密码更改完成</p>
          <el-button type="primary" @click="resetSuccess()" class="confirm">确认</el-button>
        </div>
      </div>
      <!-- content end-->
      
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>

    <!-- dialog  end-->   

  </div>
</template>
<script>
import loginHeader from '../components/loginHeader.vue'
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        
          // 对齐方式
          labelPosition:'top',
            ruleForm: {
                pass: '',
                checkPass: '',
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur', required:true }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur', required:true }
                ],
            },
            dialogVisible: false
        }
    },
    components:{
      loginHeader
    },
    methods: {
      submitForm(formName) {
        //this.getUrlParam();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
          } else {
            // console.log('error submit!!');
            return false;
          }
        });

        // 重置密码接口
        let data = {
            key:this.getUrlParam(),
            password:md5(this.ruleForm.checkPass),
        }
        console.log(data)
        this.$http.resetPassword(data,(res)=>{
            if(res.errCode == 0){
                // alert("密码重置成功")
            }else{
                // alert('密码重置失败')
            }
            // console.log(res);
        },(errRes)=>{
            // console.log(errRes)
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       // dialog
      handleClose(done) {
        this.dialogVisible = false;
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
      // 截取
       getUrlParam: function () {
        var name,value;
        var str=location.href; //取得整个地址栏
        var num=str.indexOf("?");
        str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
    
        var arr=str.split("&"); //各个参数放到数组里
        for(var i=0;i < arr.length;i++){
            num=arr[i].indexOf("=");
            if(num>0){
                name=arr[i].substring(0,num);
                value=arr[i].substr(num+1);
                this[name]=value;
            }
        }
        return value;
       
      },
      //密码重置成功
      resetSuccess:function(){
        this.dialogVisible = false;
        
         sessionStorage.removeItem('login')
         this.$router.push('/');
      }


    },
    mounted(){
     
       

    }
  }
</script>